<template>
    <div class="container">
        <div class="row">
            <div class="col-8">
                <h6><b class="square"></b> 系统通知</h6>
            </div>
            <div class="col-4 text-right">
                <button type="button" class="btn btn-secondary btn-sm" onclick="location.href='/notice';">
                  返回
                </button>
            </div>
        </div>
        
        <!-- 通知列表 -->
        <ul class="list-unstyled mt-4">
            <li class="media pb-3 pt-3 mb-2" v-for="(item,i) in (ifshow ? content.list:[])" :key="i">
                <img :src="item.fromUser.photo" class="mr-4 rounded-circle user-header" alt="系统图标">
                <div class="toast show d-lg-block" role="alert" aria-live="assertive" aria-atomic="true">
                    <div class="toast-header">
                        <strong class="mr-auto">{{item.fromUser.name}}</strong>
                        <small>{{item.notice.createTime | datatime}}</small>
<!--                        <button type="button" class="ml-2 mb-1 close" data-dismiss="toast" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>-->
                    </div>
                    <div class="toast-body">
                        <span v-if="topic==='comment'">
                          用户
                          <a class="text-primary" :href="'/profile/'+item.user.id">{{ item.user.name }}</a>
                          评论了你的<b >{{item.entityType===1?'帖子':'回复'}}</b>,
                          <a class="text-primary" :href="'/discussdetail/' + item.postId">点击查看</a> !
                        </span>
                        <span v-if="topic==='like'">
                          用户
                          <a class="text-primary" :href="'/profile/'+item.user.id">{{ item.user.name }}</a>
                          点赞了你的<b >{{item.entityType===1?'帖子':'回复'}}</b>,
                          <a class="text-primary" :href="'/discussdetail/' + item.postId">点击查看</a> !
                        </span>
                        <span v-if="topic==='follow'">
                          用户
                          <a class="text-primary" :href="'/profile/'+item.user.id">{{ item.user.name }}</a>
                          关注了你,
                          <a class="text-primary" :href="'/profile/'+item.user.id">点击查看</a> !
                        </span>
                    </div>
                </div>
            </li>																																																									
        </ul>
        <!-- 分页 -->
        <pagination ref="pagination" v-bind:list="getlist" v-bind:itemCount="8"></pagination>
    </div>
</template>
<script>
import Pagination from "@/components/pagination";
export default {
    name:'noticedetail',
    data(){
        return{
            content:null,
            topic:null, //topic：message/like/follow
            ifshow:false,
        }
    },
    components: {Pagination},
  created() {

    this.topic = this.$route.params.topic;
  },
  mounted() {
   this.getlist(1);
  },
  watch:{
    content(){
      this.setIfshow();
    }
  },
  methods:{
        //获取系统通知详情数据
        getlist(page){
            let _this = this;
           // console.log(_this.topics)
            _this.$ajax.post(process.env.VUE_APP_SERVER + '/business/web/notice/detail/'+_this.topic, {
                page: page,
                size: _this.$refs.pagination.size,
            }).then((response)=>{
                console.log("查询帖子详情结果：", response);
                _this.content = response.data.content;

                _this.$refs.pagination.render(page, response.data.content.total);

            })
        },
      setIfshow(){
        if(this.content != null){
          this.ifshow = true;
        }else{
          this.ifshow = false;
        }
      },
    }
}
</script>

<style lang="scss" scoped>
@import '@/assets/style/css/global.scss';
@import '@/assets/style/css/letter.scss';
</style>